<!-- 卖家首页 -->
<template>
	<view class="container">
		<!-- 返回按钮 -->
		<view class="header" @click="back">
			<image src="https://community.chuangxiangdianli.com/images/neighborimg/market/back @2x.png" mode=""></image>
		</view>
		<view class="avator">
			<view v-show="user_info.avatar">
				<image :src="user_info.avatar" mode=""></image>
			</view>
			<view>
				<view v-show="user_info.nickname">
					{{user_info.nickname}}
				</view>
				<view v-show="user_info.user_intro">
					{{user_info.user_intro}}
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="content">
			<!-- 导航 -->
			<view class="navigation">
				<view class="navigation-item"
					@click="changeActiveNavigate(0)"
					:class="navigation_index==0?'active':''">
					他的发布 {{publish_list.length}}
				</view>
				<view class="navigation-item"
					@click="changeActiveNavigate(1)"
					:class="navigation_index==1?'active':''">
					他的评论 {{comment_list.length}}
				</view>
			</view>
			<!-- 内容 -->
			<!-- 发布的内容 -->
			<view class="publish" v-if="navigation_index==0">
				<view class="publish-item" v-for="(item,i) in publish_list" :key="item.id">
					<!-- 当前的状态 卖出还是未卖出 -->
					<view class="publish-item-status" v-if="item.is_sale!=0&&item.is_sale!=2">
						<image src="https://community.chuangxiangdianli.com/images/neighborimg/market/maichu@2x.png" mode=""></image>
						<view v-if="item.is_sale==1">
							已卖出
						</view>
						<view v-if="item.is_sale==3||item.is_sale==4">
							已删除
						</view>
					</view>
					<view class="publish-item-avator">
						<view v-show="user_info.avatar">
							<image :src="user_info.avatar" mode=""></image>
						</view>
						<view>
							<view v-show="user_info.nickname">
								{{user_info.nickname}}
							</view>
							<!-- <view>
								今天  18:05
							</view> -->
						</view>
					</view>
					<view class="publish-item-describe">
						<view>
							<view>
								{{item.goods_name}}
							</view>
							<view>
								￥  {{item.goods_price}}
							</view>
						</view>
						<view>
							{{item.goods_content}}
						</view>
					</view>
					<!-- <view class="publish-item-img-video">
						<view class="publish-item-img-img">
							
						</view>
						<view class="publish-item-img-video">
							
						</view>
					</view> -->
					<view class="publish-item-line" v-if="i<publish_list.length-1">
						
					</view>
				</view>
			</view>
			<!-- 评论的内容 -->
			<view class="comment" v-if="navigation_index==1">
				<view class="comment-item" v-for="item in comment_list" :key="item.id">
					<view class="comment-item-avator">
						<!-- <image src="" mode=""></image> -->
					</view>
					<view class="comment-item-right">
						<view class="comment-item-name">
							了橡树俺儿
						</view>
						<view class="comment-item-describe">
							买家与卖家交易完成后，买家进行评价，评价后
						</view>
						<view class="comment-item-time">
							2018.09.015   12:34
						</view>
						<view class="comment-item-reply" v-if="item.is_replace">
							<text>楼主回复：</text>谢谢亲爱的
						</view>
						<view class="comment-item-time" v-if="item.is_replace">
							2018.09.015   12:34
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>
<!-- js -->
<script>
	// 引入封装的请求
	import request from '@/utils/request.js'	
	export default {
		data() {
			return {
				// 用户id
				user_id:null,
				// 用户信息
				user_info:{
					id:null,
					nickname:'',
					avatar:'',
					sex:'',
					phone:''
				},
				// 当前导航suoyin
				navigation_index:0,
				// 发布列表
				publish_list:[],
				// 评论列表
				comment_list:[],
				// 商品列表
				list:[],
				// 当前页码
				pageNo:1,
				// 列表个数 
				limit:10,
				// 是否正在请求数据
				is_loading:false,
				// 是否请求完数据
				is_bottom:false,
				// 底部正在加载中
				status: 'loadmore',
			}
		},
		computed: {
			
		},
		watch: {
			
		},
		onLoad(options) {
			this.user_id = options.id
			this.get_user_info()
			this.get_publish_list()
		},
		onShow() {
			
		},
		// 页面底部加载
		onReachBottom(){
			let that = this
			this.status = 'loading';
			// console.log(11111)
			if(that.status = 'nomore' || that.is_loading){
				return false
			}
			this.pageNo++
			setTimeout(() => {
				if(this.navigation_index == 0){
					that.get_publish_list(true)
				}else{
					that.get_message_list(true)
				}
				
			}, 1000)
		},
		methods: {
			// back
			back(){
				uni.navigateBack()
			},
			// 获取用户信息
			get_user_info(){
				// 
				let that = this
				request.get('wechat/getUserData/'+that.user_id).then(res=>{
					// console.log(res)
					if(res.code == 200){
						that.user_info = res.data
					}
				})
			},
			// 获取当前用户评论列表
			get_message_list(turn){
				let that = this
				request.get('Mini/circle/flea/LssueGoodsComment',{
					user_id:that.user_id,
					page:that.pageNo,
					limit:that.limit
				}).then(res=>{
					console.log(res)
					that.is_loading = false
					if (res.code==200) {
						if(turn){
							if(res.data.data.length>0){
								that.comment_list = [
									...that.comment_list,
									...res.data.data
								]
							}
						}else{
							that.comment_list = res.data.data
						}
						if(res.data.count==that.comment_list.length){
							// that.is_boottom = true
							that.status = 'nomore';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取当前用户发布的列表
			get_publish_list(turn){
				let that = this
				request.get('Mini/circle/flea/lssueGoods',{
					user_id:that.user_id,
					page:that.pageNo,
					limit:that.limit
				}).then(res=>{
					console.log(res)
					that.is_loading = false
					if (res.code==200) {
						if(turn){
							if(res.data.data.length>0){
								that.publish_list = [
									...that.publish_list,
									...res.data.data
								]
							}
						}else{
							that.publish_list = res.data.data
						}
						if(res.data.count==that.publish_list.length){
							// that.is_boottom = true
							that.status = 'nomore';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 改变当前的高亮导航
			changeActiveNavigate(type){
				this.pageNo = 1
				// 是否正在请求数据
				this.is_loading = false
				// 是否请求完数据
				this.is_bottom = false
				// 底部正在加载中
				this.status =  'loadmore'
				if(type==0 && this.navigation_index!=0){
					this.get_publish_list()
				}else if(type==1 && this.navigation_index!=1){
					this.get_message_list()
				}
				this.navigation_index = type
			}
		}
	}
</script>
<!-- css -->
<style lang="scss" scoped>
	/* 单行注释 */
	@mixin one-ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	/* 多行注释 */
	@mixin more-ellipsis($num) {
		display:-webkit-box;
		-webkit-box-orient:vertical;//表示盒子对象的子元素的排列方式
		-webkit-line-clamp:$num;//限制文本的行数，表示文本第多少行省略
		overflow:hiddlen;
		text-overflow:ellipsis;
	}
	// 分割线
	@mixin style-line($width,$height,$bgcolor) {
		width: $width;
		height: $height;
		background-color: $bgcolor;
	}
	.container{
		width: 100vw;
		// height: 100vh;
		background-color: #FFFFFF;
		box-sizing: border-box;
		font-family: PingFang SC;
		padding-bottom: 100rpx;
		overflow: auto;
		padding-top: var(--status-bar-height);
		.header{
			margin-top: 30rpx;
			width: 100%;
			// height: 82rpx; 
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 17rpx;
			background-color: #FFFFFF;
			margin-bottom: 11rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 42rpx;
			}
		}
		.avator{
			width: 100%;
			height: 229rpx;
			box-sizing: border-box;
			padding-left: 27rpx;
			padding-right: 59rpx;
			display: flex;
			&>view:nth-child(1){
				margin-top: 11rpx;
				width: 178rpx;
				height: 178rpx;
				border-radius: 50%;
				margin-right: 61rpx;
				overflow: hidden;
			}
			&>view:nth-child(2){
				width: 425rpx;
				&>view:nth-child(1){
					margin-left: 6rpx;
					font-size: 36rpx;
					font-family: Hiragino Sans GB;
					font-weight: bold;
					color: #333333;
					line-height: 56rpx;
					margin-bottom: 33rpx;
				}
				&>view:nth-child(2){
					@include more-ellipsis(2);
					font-size: 24rpx;
					font-family: Hiragino Sans GB;
					font-weight: bold;
					color: #999999;
					line-height: 56rpx;
					
				}
			}
		}
		.line{
			@include  style-line(100%,8rpx,#F3F5F8)
		}
		.content{
			.navigation{
				width: 100%;
				height: 84rpx;
				padding-left: 89rpx;
				padding-right: 85rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.navigation-item{
					height: 100%;
					box-sizing: border-box;
					border-bottom: 9rpx solid transparent;
					display:flex;
					align-items: center;
					transition: all 0.2s linear 0s;
					&.active{
						border-color: #FC9F01;
						color: #FBAD0A;
						border-radius: 5rpx;
					}
				}
			}
			.publish{
				width: 100%;
				margin-top: 15rpx;
				.publish-item{
					width: 100%;
					padding-top: 31rpx;
					overflow: hidden;
					position: relative;
					.publish-item-status{
						position: absolute;
						top: 54rpx;
						right: 178rpx;
						z-index: 2;
						width: 135rpx;
						height: 107rpx;
						image{
							width: 100%;
							height: 100%;
						}
						&>view{
							position: absolute;
							top: 32rpx;
							left: 30rpx;
							transform: rotate(20deg);
							font-size: 24rpx;
							font-family: Microsoft YaHei UI;
							font-weight: bold;
							color: #FFFFFF;
						}
					}
					.publish-item-avator{
						margin-left: 26rpx;
						// height: 94rpx;
						display: flex;
						align-items: center;
						&>view:nth-child(1){
							width: 94rpx;
							height: 94rpx;
							border-radius: 10rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						&>view:nth-child(2){
							margin-left: 30rpx;
							padding: 6rpx 0;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							&>view:nth-child(1){
								font-size: 30rpx;
								font-family: Hiragino Sans GB;
								font-weight: bold;
								color: #333333;
							}
							&>view:nth-child(2){
								font-size: 24rpx;
								font-family: Hiragino Sans GB;
								font-weight: normal;
								color: #999999;
							}
						}
					}
					.publish-item-describe{
						width: 100%;
						box-sizing: border-box;
						padding-left: 29rpx;
						padding-right: 22rpx;
						margin-bottom: 30rpx;
						overflow: hidden;
						&>view:nth-child(1){
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							&>view:nth-child(1){
								font-size: 30rpx;
								font-weight: bold;
								color: #333;
							}
							&>view:nth-child(2){
								font-size: 36rpx;
								font-family: Hiragino Sans GB;
								font-weight: bold;
								color: #B83D42;
							}
						}
						&>view:nth-child(2){
							font-size: 30rpx;
							font-family: Hiragino Sans GB;
							color: #333333;
							line-height: 48rpx;
							@include more-ellipsis(2)
						}
					}
					.publish-item-img-video{
						width: 100%;
						padding:0 30rpx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						padding-bottom: 41rpx;
						&>view{
							width: 220rpx;
							height: 220rpx;
							border-radius: 20rpx;
							margin-left: 16rpx;
							margin-bottom: 30rpx;
							border: 1px solid red;
							&:nth-child(1){
								margin-left: 0;
							}
							
						}
					}
					.publish-item-line{
						@include  style-line(100%,12rpx,#F3F5F8)
					}
				}
			}
			.comment{
				margin-top: 42rpx;
				width: 100%;
				box-sizing: border-box;
				padding-left: 8rpx;
				.comment-item{
					width: 100%;
					box-sizing: border-box;
					padding-top: 29rpx;
					padding-left: 24rpx;
					padding-right: 32rpx;
					padding-bottom: 22rpx;
					border-bottom: 1rpx solid  #DCDCDC;
					display: flex;
					.comment-item-avator{
						width: 70rpx;
						height: 70rpx;
						border-radius: 10rpx;
						margin-right: 40rpx;
						flex-shrink: 0;
					}
					.comment-item-right{
						flex-shrink: 0;
						width: 586rpx;
						box-sizing: border-box;
						&>view {
							margin-bottom: 20rpx;
						}
						.comment-item-name{
							font-size: 30rpx;
							font-family: Hiragino Sans GB;
							font-weight: bold;
							color: #999999;
						}
						.comment-item-describe{
							font-size: 26rpx;
							font-family: Hiragino Sans GB;
							font-weight: bold;
							color: #333333;
							line-height: 60rpx;
						}
						.comment-item-time{
							font-size: 24rpx;
							color: #999999;
						}
						.comment-item-reply{
							font-size: 24rpx;
							color: #333333;
							text{
								color: #999999;
							}
						}
						.comment-item-time{
							
						}
					}
				}
			}
		}
	}
</style>
